/**
 * Created by hurley on 2017/3/6.
 *
 * 传递数组进来，5个参数，如：["aAs8",1,60,30,20],并用data来传递
 * 第一位 ：获取的验证码
 * 第二位： 值为0：将验证码转为大写
 *          值为1：将验证码转为小写
 *          值为2：不转换大小写
 * 第三位：验证码span的宽度
 * 第四位：验证码span的高度
 * 第五位：验证码字体大小
 *
 * 五个参数中如果有参数不需要传递，将其传递为 ""
 */

import React from 'react';
import Styles from '../util/Styles.js';

export default class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            flag: true
        };
        this.Style={};
        this._width = '';
        this._height='';
        this._size='';

        this.a1='';
        this.a2='';
        this.a3='';
        this.a4='';

        this.r1='';
        this.r2='';
        this.r3='';
        this.r4='';


        this._text='';

    }

    componentWillMount() {
        this.change(this.props.data);

    }

    fetchText(data) {
        let oSpan = document.getElementById("oSpan");
        let value = oSpan.innerHTML;
        //console.warn(value);
    }
    
    change(data){
        this.Style.testview={
            textAlign:"center",
            cursor:'pointer',
            display:"block",
            border:""
        }
        this._width = data[2];
        this._height = data[3];
        this._size = data[4];
        this._text = data[0];

        this.a1=(this._text.charAt(0));
        this.a2=(this._text.charAt(1));
        this.a3=(this._text.charAt(2));
        this.a4=(this._text.charAt(3));

        this.r1="./img/"+ this.a1+".png";
        this.r2="./img/"+ this.a2+".png";
        this.r3="./img/"+ this.a3+".png";
        this.r4="./img/"+ this.a4+".png";

        this.Style.testview.display = "block";
        this.Style.testview.border = "";
    }



    render() {
        //console.warn(this.props.data);
        // let _text;
        // let i = this.props.data[1];
        // let toUpper = this.props.data[0].toUpperCase();
        // let toLower = this.props.data[0].toLowerCase();
        //
        // if (i == 0) {
        //    this._text = toUpper;
        // } else if (i == 1) {
        //     this._text = toLower;
        // } else if (i == 2) {
        //     this._text = this.props.data[0];
        // }
        return (
            <span id="oSpan" style={this.Style.testview} onClick={this.fetchText} >
                < img src={this.r1} style={{width:20,height:20}}/>
                < img src={this.r2} style={{width:20,height:20}}/>
                < img src={this.r3} style={{width:20,height:20}}/>
                < img src={this.r4} style={{width:20,height:20}}/>
            </span>
        )
    }
}
